<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        a {
            text-align: none;
        }

        li {
            list-style: none;
        }

        .box {
            width: 100%;
            height: 800px;
            /* background-color: rgb(130, 185, 176); */
            margin: 10px auto;
            float: left;
        }

        .box1 {
            background-color: black;
        }

        .box2 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="box">
        <div id="box1" style="width: 600px;height:400px;"></div>
        <div id="box2" style="width: 600px;height:400px;"></div>
        <div id="box3" style="width: 600px;height:400px;"></div>
        <div id="box4" style="width: 600px;height:400px;"></div>
    </div>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <script type="text/javascript">
        //获取接口数据
        function fn1() {

            var xhr = new XMLHttpRequest()
            xhr.open('get', 'https://www.zzgoodqc.cn/index.php/index/index/getOrders')
            xhr.send()
            xhr.onload = () => {
                var a = JSON.parse(xhr.response);
                var order = a.data.arr
                console.log(order);
                var list = a.data.list
                console.log(list);
                var arr = [5, 10, 15, 20, 25]
                var title = a.msg
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('box1'));
                option = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['4月', '5月', '6月', '7月', '8月', '9月']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: `￥{value}k`
                        },
                        data: ['5', '10', '15', '20', '25']
                    },
                    series: [
                        {
                            data: [59, 88, 136, 110, 310, 520],
                            type: 'line',
                            areaStyle: {
                                color: 'rgb(172, 124, 216)',
                            },
                            smooth: true
                        },
                        {
                            data: [30, 46, 89, 26, 69, 200],
                            type: 'line',
                            areaStyle: {
                                color: 'blue',
                                opacity: 0.5
                            },
                            smooth: true
                        }
                    ]
                };
                myChart.setOption(option);

            }
            xhr.onerror = (e) => {
                console.log(e);
            }
        }
        fn1()
        function fn2() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('box2'));
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 4260, name: '今日' },
                            { value: '+'+3970, name: '比昨日' },
                            { value: 3454, name: '本周' },
                            { value: '-'+2390, name: '上周同期' },
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        }
        fn2()
    </script>
</body>

</html>